<!-- 授课教师签到 -->
<!-- 一期一档 -->
<template>
  <div class="one_stage_one_gear">
    <div class="search">
      <el-form ref="form" :model="queryParams.params" label-width="0">
        <el-form-item>
          <el-date-picker style="width: 100%" v-model="queryParams.params.date" type="date" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>

        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <!-- <el-button type="primary" icon="el-icon-plus" @click="oper('add')">添加</el-button> -->
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" height="100%"
        :header-cell-style="{ 'background': '#f2f3f4', 'color': '#555', 'font-weight': 'bold', 'line-height': '32px' }"
        border style="width: 100%;height: 100%;overflow: auto" :row-class-name="tableRowClassName">
        <el-table-column prop="signDate" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="timeOfDay" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="signLesson" label="课节" width="180">
        </el-table-column>
        <el-table-column prop="teachingContent" label="授课内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="teachingContent" label="签到教师" width="140" align="center">
          <template slot-scope="scope">
            <el-image v-if="scope.row.teacherSign" style="width: 100px; height: 50px" :src="scope.row.teacherSign" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="oper('SignIn', scope.row, true)">教师签到</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit" @click="oper('update', scope.row)">修改</el-button>
            <!-- <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="InformationDel(scope.row)"
                >删除</el-button
              >
  
              <el-button type="primary" size="small" @click="derive(scope.row)"
                ><i class="iconfont icon-daochu"></i> 导出</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="FileManagement(scope.row)"
                ><i class="iconfont icon-dangan"></i>  档案管理</el-button
              > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.current" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="修改授课教师信息" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-form ref="postForm" :rules="rules" :model="formData" label-position="left" label-width="150px">
        <el-card>
          <el-form-item label="日期" prop="signDate">
            <el-date-picker style="width: 100%" v-model="formData.signDate" type="date" value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="时间" prop="timeOfDay">
            <el-radio-group v-model="formData.timeOfDay" @change="radioChange">
              <el-radio v-for="(item, index) in options" :key="index" :label="item.value">{{ item.label }}</el-radio>

            </el-radio-group>
          </el-form-item>

          <el-form-item label="课节" prop="signLesson" v-if="formData.timeOfDay">
            <template v-if="formData.timeOfDay == '上午'">
              <el-radio-group v-model="formData.signLesson">
                <el-radio v-for="(item, index) in options1" :key="index" :label="item.value">{{ item.label }}</el-radio>

              </el-radio-group>
            </template>
            <template v-if="formData.timeOfDay == '下午'">
              <el-radio-group v-model="formData.signLesson">
                <el-radio v-for="(item, index) in options2" :key="index" :label="item.value">{{ item.label }}</el-radio>

              </el-radio-group>
            </template>
          </el-form-item>

          <el-form-item label="授课内容" prop="teachingContent">
            <el-select
                  v-model="formData.teachingContent"
                 :disabled='true'
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item,index) in options3"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
           
          </el-form-item>
          <el-form-item label="签到">
            <signature v-model="formData.teacherSign"></signature>
          </el-form-item>
        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="授课教师签到" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">
      <el-form ref="postForm" :rules="rules" :model="formData" label-position="left" label-width="150px">
        <el-card>

          <el-form-item label="签到">
            <signature v-model="formData.teacherSign"></signature>
          </el-form-item>
        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { fetchList, fetchAdd, fetchDetail, fetchUpdata,fetchOptions } from "@/api/signIn/index.js";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      dialogTitle: "添加信息",
      tableData: [],
      archivesRadio: "",
      total: 0,
      queryParams: {
        current: 1,
        params: {
          trainingClassInfoId: this.$route.query.id,
        },
        size: 10,
      },
      options: [
        { value: '上午', label: '上午' },
        { value: '下午', label: '下午' }
      ],
      options1: [
        { value: '一二', label: '一二' },
        { value: '三四', label: '三四' }
      ],
      options2: [
        { value: '五六', label: '五六' },
        { value: '七八', label: '七八' }
      ],
      options3:[],
      state: false,//新增
      onlySignature: false,//只签名
      formData: {
        trainingClassInfoId: this.$route.query.id,
        signDate: "",
        signLesson: "",
        teachingContent: "",
        timeOfDay: "",
        teacherSign: ''
      },
      rules: {
        signDate: [
          { required: true, message: '请选择日期！' }
        ],
        timeOfDay: [
          { required: true, message: '请选择时间！' }
        ],
        signLesson: [
          { required: true, message: '请选择课节！' }
        ],
        teachingContent: [
          { required: true, message: '授课内容不能为空！' }
        ],
        // examId: [
        //   { required: true, message: '请选择试卷！' }
        // ],

      }
    };
  },
  created() {
    this.getDetail();
    
  },
  methods: {
    async getOptions(){
      let res = await fetchOptions({
        id:this.$route.query.id
      });
      console.log(res,'培训课程');
      if (res.code == 200) {
        this.options3 = res.data;

      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    async getDetail() {
      const res = await fetchList(this.queryParams);
      console.log(res);
      this.tableData = res.data.records;
      this.total = res.data.total;
    },
    derive() {
      this.$message("导出");
    },

    oper(type, row, onlySignature) {
      this.getOptions()
      let flex = true
      if (type == "look") {
        this.disabled = true;
        this.getDetailFn(row);
      } else if (type == "update") {
        this.onlySignature = onlySignature
        if(row.id){
          this.state = true;
          this.getDetailFn(row);
        }else{
          this.state = false;
          this.formData.trainingClassScheduleId = row.trainingClassScheduleId
          this.formData.trainingClassInfoId = this.$route.query.id
          this.formData.teachingContent = row.teachingContent
        }
      } else if (type == "add") {
        this.state = false;
        this.onlySignature = onlySignature
        this.formData = {
          trainingClassInfoId: this.$route.query.id,
          signDate: "",
          signLesson: "",
          teachingContent: "",
          timeOfDay: "",
          teacherSign: ""
        };
      }else if (type == "SignIn") {
        if(row.id){
          this.state = true;
          this.onlySignature = onlySignature
          this.getDetailFn(row);
        }else{
          flex = false
          this.$message({
            message: '请完善信息后进行签到！',
            type: 'warning'
          })
        }
      }
      if(flex){
        if (this.onlySignature) {
          this.dialogVisible1 = true;
        } else {
          this.dialogVisible = true;
        }
      }
      this.$nextTick(() => {
        this.$refs.postForm.clearValidate()
      })

    },
    async getDetailFn(row) {
      console.log(row);

      let res = await fetchDetail(row.id);
      if (res.code == 200) {
        this.formData = res.data;
        this.formData.trainingClassInfoId = this.$route.query.id
      }
    },
    handleSave() {
      let that = this
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.$confirm('确实要提交保存吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let api = this.state ? fetchUpdata : fetchAdd
          api(that.formData).then(() => {
            that.$message({
              type: 'success',
              message: '保存成功!'
            })
            if (this.onlySignature) {
              this.dialogVisible1 = false;
            } else {
              that.dialogVisible = false
            }

            this.getDetail();
          })
        })

      })

    },
    handleClose(done) {
      done();
    },
    search() {
      this.getDetail();
    },

    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getDetail();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getDetail();
    },
    radioChange() {
      this.formData.session = ''

    },
  },
};
</script>
  
<style lang="less" scoped>
.signature {
  width: 100px;
  height: 50px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.one_stage_one_gear {
  height: calc(100vh - 100px);
  padding: 20px;

  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .table {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: calc(100% - 50px);

    .pagination {
      margin-top: 20px;
      text-align: right;
      margin-right: 5px;
    }

    .iconfont {
      font-size: 12px;
    }
  }
}
</style>
  